* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    /* 径向渐变背景 ellipse表示背景 */
    background: radial-gradient(ellipse at center, #fffeea 0%, #fffeea 35%, #b7e8eb 100%);
    overflow: hidden;
}

/* 海平面 */
.sea {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5%;
    background-color: #015871;
}

.wave {
    position: absolute;
    top: -198px;
    /* repeat-x 横向铺满 */
    background: url("svg/wave.svg") repeat-x;
    width: 6400px;
    height: 198px;
    animation: wave 14s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}

.wave:nth-child(2) {
    top: -175px;
    /* 执行波动+上下浮动动画 */
    animation: wave 14s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite, swell 7s ease infinite;
    animation-delay: .7s;
}

/* 波动动画 */
@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

/* 上下浮动动画 */
@keyframes swell {
    0%, 100% {
        transform: translate(0, -25px);
    }

    50% {
        transform: translate(0, 5px);
    }
}